<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>产品列表</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/details.css">
</head>
<body>
 <!-- <header></header>
 <main></main>
 <footer></footer> -->


     <!-- 头部 -->
     <div id="hard">
        <div class="typeArea heart clearfix">
            <div class="mark">realme.com</div>
            <div class="greet">欢迎光临，&emsp;请 <a href="#">登陆\<span>注册</span></a></div>
        </div>
    </div>
    <!-- 头部输入框 -->
    <div id="hard2" class="heart">
        <div class="heart inpu clearfix">
            <div class="laogo">realme</div>
            <div class="buttoNTop clearfix">
                <input type="text" value="超级怪兽 85W超级快充">
                <i></i>
                <span>购物车</span>
                <a href="#">请 登录\<b>注册</b></a>
                <div class="bigt"></div>
            </div>
        </div>
    </div>
    <!-- 主体部分1 -->
    <div id="body1">
        <div class="heart carsoual clearfix">
            <!-- lun波区域  -->
            <div class="left_box">
                <ul class="big_box clearfix">
                    <li class="show li1"></li>
                    <li class="li2"></li>
                    <li class="li3"></li>
                </ul>
                <ul class="small_box clearfix">
                    <li class="yellOw li1"></li>
                    <li class="li2"></li>
                    <li class="li3"></li>
                    北京时间 <i>00</i> : <b>00</b> : <a>00</a>
                </ul>
            </div>
            <!-- 抽屉选项卡 -->
            <div class="right_box">
                <dl>
                    <dt class="conceral">realme
                         
                    </dt>
                    <dd class="item1 reveal"> </dd>
                    <dt>realme
                        
                    </dt>
                    <dd class="item2"> </dd>
                    <dt>realme
                        
                    </dt>
                    <dd class="item3"> </dd>
                    <dt>realme
                         
                    </dt>
                    <dd class="item4"> </dd>
                    <dt>realme
                         
                    </dt>
                    <dd class="item5"> </dd>
                    <dt>realme
                         
                    </dt>
                    <dd class="item6"> </dd>
                    <dt>realme
                         
                    </dt>
                    <dd class="item7"> </dd>
                </dl>
            </div>
        </div>
        <div class="bord_buttom heart"></div>
    </div>
    <!-- 主体部分2  -->
    <main id="body2">
        <div class="discount heart">
            <span>reoman 优惠区</span>
        </div>
    </main>
    <!-- 主体部分3 -->
    <main id="body3">
        <ul class="heart big_box">
            <li class="li1"></li>
            <li class="li2"></li>
            <li class="li3"></li>
            <li class="li4"></li>
            <li class="li5"></li>
            <li class="li6"></li>
            <li class="li7"></li>
            <li class="li8"></li>
            <li class="li9"></li>
            <li class="li10"></li>
        </ul>
    </main>
    <!-- 主体部分4  -->
    <main id="body4">
        <div class="discount heart">
            <span><b>新</b>品上架</span>
        </div>
    </main>
    <!-- 主体部分5  -->
    <main id="body5">
        <div class="heart big_box clearfix">
            <ul class="left_box clearfix">
                <li class="lis"></li>
                <li class=""></li>
                <li class=""></li>
                <li class=""></li>
                <li class=""></li>
                <li class=""></li>
                <li class=""></li>
                <li class=""></li>
                <li class=""></li>
                <li class=""></li>
            </ul>
            <div class="right_box">
                <dl>
                    <dt class="conceral">新 品 一
                    </dt>
                    <dd class="item1 reveal"></dd>
                    <dt>新 品 二
                    </dt>
                    <dd class="item2"></dd>
                    <dt>新 品 三
                    </dt>
                    <dd class="item3"></dd>
                    <dt>新 品 四
                    </dt>
                    <dd class="item4"></dd>
                    <dt>新 品 五
                    </dt>
                    <dd class="item5"></dd>
                    <dt>新 品 六
                    </dt>
                    <dd class="item6"></dd>
                    <dt>新 品 七
                    </dt>
                    <dd class="item7"></dd>
                    <dt>新 品 八
                    </dt>
                    <dd class="item8"></dd>
                </dl>
            </div>
        </div>
    </main>
    <!-- 主体部分6  -->
    <main id="body6">
        <div class="heart">
            <!-- du独家提供 -->
          <ul class="provison clearfix">
              <li class="similarity onlyChild"> <b>独</b> 家提供</li>
              <li class="similarity yellow">社会文学</li>
              <li class="similarity">科学技术</li>
              <li class="similarity">儿童文学</li>
              <li class="similarity">教学参辅</li>
              <li class="similarity">生活</li>
              <li class="similarity">小说</li>
          </ul> 
          <ul class="frame">
              <li class="big-box show first_box">
                  <ul class="first_ul">
                      <li class="cursole li1"></li>
                      <li class="cursole li2"></li>
                      <li class="cursole li3"></li>
                      <li class="cursole li4 work_shift"></li>
                      <li class="cursole li5"></li>
                      <li class="cursole li6"></li>
                      <li class="cursole li7"></li>
                      <li class="cursole li8"></li>
                  </ul>
                  <ul class="doT clearfix">
                      <li class="dot dots"></li>
                      <li class="dot"></li>
                      <li class="dot"></li>
                      <li class="dot"></li>
                      <li class="dot"></li>
                      <li class="dot"></li>
                      <li class="dot"></li>
                      <li class="dot"></li>
                  </ul>
              </li>
              <li class="big-box two_box1">2</li>
              <li class="big-box two_box2">3</li>
              <li class="big-box two_box3">4</li>
              <li class="big-box two_box4">5</li>
              <li class="big-box two_box5">6</li>
          </ul>
          
        </div>
    </main>
    <!-- 主体部分7  -->
    <main id="body7">
        <div class="heart clearfix">
            <main class="left"> <b>独</b>家提供</main>
            <main class="right">换一批</main>
        </div>
    </main>
    <!-- 主体部分8  -->
    <main id="body8">
        <div class="heart">
            <ul>
                <li class="namely1 lis"></li>
                <li class="namely2"></li>
                <li class="namely3"></li>
                <li class="namely4"></li>
                <li class="namely5"></li>
                <li class="namely6"></li>
            </ul>
        </div>
    </main>
    <!-- 导航栏 -->
    <footer>
        <header>
           <a href="../html/index.html">返回首页</a>
        </header>
        <main>
            <a href="../html/product copy.html">产品详情</a>
        </main>
    </footer>



    <!-- yejiao页脚1 -->
    <div id="foot1">
        <div class="heart icon">
            <div class="warp clearfix">
                <div class="beauti beauti1"></div>
                <div class="beauti beauti2 beauti5"></div>
                <div class="beauti beauti3 beauti5"></div>
                <div class="beauti beauti4"></div>
            </div>
        </div>
        <div class="heart litt">
            <div class="warp">
                <ul class="clearfix">
                    <li class="diagonal">支付方式</li>
                    <li class="diagonal">网上支付</li>
                    <li class="diagonal">礼品卡支付</li>
                    <li class="diagonal">银行转帐</li>
                    <li class="diagonal">银行转帐</li>
                    <li class="diagonal">银行转帐</li>
                    <li class="diagonal">银行转帐</li>
                    <li class="diagonal">银行转帐</li>
                    <li class="diagonal">银行转帐</li>
                    <li class="diagonal">银行转帐</li>
                    <li class="diagonal">银行转帐</li>
                    <li class="diagonal">银行转帐</li>
                    <li class="diagonal">银行转帐</li>
                    <li class="diagonal">银行转帐</li>
                    <li class="diagonal">银行转帐</li>
                    <li class="diagonal">银行转帐</li>
                    <li class="diagonal">银行转帐</li>
                    <li class="diagonal">银行转帐</li>
                    <li class="diagonal">银行转帐</li>
                    <li class="diagonal">银行转帐</li>
                    <li class="diagonal">银行转帐</li>
                    <li class="diagonal">银行转帐</li>
                    <li class="diagonal">银行转帐</li>
                    <li class="diagonal">银行转帐</li>
                    <li class="diagonal">银行转帐</li>
                </ul>
            </div>
            <div class="number">
                <i>r e a l m e</i>
            </div>
        </div>
    </div>
    <script src="../js/details.js"></script>
</body>
</html>